<template>
  <div class="main-content">
    <!-- 列表页 -->
    <div v-if="showFlag">
      <el-form :inline="true" :model="searchForm" class="form-content">
        <el-form-item label="账号">
          <el-input v-model="searchForm.zhanghao" placeholder="账号" clearable></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="searchForm.xingming" placeholder="姓名" clearable></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="searchForm.xingbie" placeholder="请选择性别" clearable>
            <el-option v-for="(item,index) in xingbieOptions" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button type="success" @click="addOrUpdateHandler()">新增</el-button>
          <el-button type="danger" :disabled="dataListSelections.length <= 0" @click="deleteHandler()">删除</el-button>
        </el-form-item>
      </el-form>
      <div class="table-content">
        <el-table class="tables" :data="dataList" border @selection-change="selectionChangeHandler">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column type="index" label="索引" width="50" align="center" />
          <el-table-column prop="zhanghao" label="账号" align="center" />
          <el-table-column prop="xingming" label="姓名" align="center" />
          <el-table-column prop="xingbie" label="性别" align="center" />
          <el-table-column prop="touxiang" label="头像" align="center" width="100">
            <template slot-scope="scope">
              <img v-if="scope.row.touxiang" :src="$base.url+scope.row.touxiang.split(',')[0]" width="60" height="60" />
              <span v-else>无图片</span>
            </template>
          </el-table-column>
          <el-table-column prop="youxiang" label="邮箱" align="center" />
          <el-table-column prop="shouji" label="手机" align="center" />
          <el-table-column prop="renyuanleixing" label="人员类型" align="center" />
          <el-table-column label="操作" align="center" width="180">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">编辑</el-button>
              <el-button type="danger" size="mini" @click="deleteHandler(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="margin-top:20px;"
          :current-page="pageIndex"
          :page-size="pageSize"
          :total="totalPage"
          layout="total, prev, pager, next, jumper"
          @current-change="currentChangeHandle"
          @size-change="sizeChangeHandle"
          :page-sizes="[10, 20, 50]"
          background
        />
      </div>
      <add-or-update v-if="addOrUpdateFlag" :parent="this" ref="addOrUpdate"></add-or-update>
    </div>
  </div>
</template>
<script>
import AddOrUpdate from "./add-or-update";
import { getRenyuanList, deleteRenyuan } from '@/utils/renyuanLocal';
export default {
  data() {
    return {
      searchForm: { zhanghao: '', xingming: '', xingbie: '' },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListSelections: [],
      showFlag: true,
      addOrUpdateFlag: false,
      xingbieOptions: ['男','女'],
    };
  },
  created() {
    this.getDataList();
  },
  components: { AddOrUpdate },
  methods: {
    search() {
      this.pageIndex = 1;
      this.getDataList();
    },
    getDataList() {
      let list = getRenyuanList();
      if (this.searchForm.zhanghao) list = list.filter(i => i.zhanghao && i.zhanghao.includes(this.searchForm.zhanghao));
      if (this.searchForm.xingming) list = list.filter(i => i.xingming && i.xingming.includes(this.searchForm.xingming));
      if (this.searchForm.xingbie) list = list.filter(i => i.xingbie === this.searchForm.xingbie);
      this.totalPage = list.length;
      const start = (this.pageIndex-1)*this.pageSize;
      this.dataList = list.slice(start, start+this.pageSize);
    },
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.getDataList();
    },
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    selectionChangeHandler(val) {
      this.dataListSelections = val;
    },
    addOrUpdateHandler(id) {
      this.addOrUpdateFlag = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },
    deleteHandler(id) {
      let ids = id ? [id] : this.dataListSelections.map(i => i.id);
      if (ids.length === 0) return;
      this.$confirm('确定要删除选中项吗？', '提示', { type: 'warning' }).then(() => {
        deleteRenyuan(ids);
        this.getDataList();
        this.$message.success('删除成功');
      });
    },
  }
}
</script>
